<template>
  <div class="anonymousMessage">
    <div class="search">
      <!-- <div class="img-box">
        <img :src="xsImg" alt="" />
      </div> -->
      <div class="search-input">
        <el-input
          style="flex: 6"
          size="large"
          v-model="name"
          placeholder="请输入查找的名字"
          maxlength="6"
          clearable
        >
        </el-input>
        <el-button
          type="primary"
          style="flex: 1; margin-left: 5px"
          size="large"
          @click="searchFn"
        >
          <el-icon class="el-icon--right"><Search /></el-icon> 查询
        </el-button>
      </div>

      <div v-if="show" class="massage">
        <div class="massage-input">
          <el-input
            v-model="message"
            :rows="6"
            type="textarea"
            placeholder="你想对（他/她）说点什么呢？"
          />
          <div style="width: 100%; padding: 10px 0; text-align: right">
            <el-button
              style="margin-left: 5px"
              size="large"
              type="primary"
              :icon="Position"
              @click="sendFn"
            >
              发送
            </el-button>
          </div>
        </div>
        <div class="massage-list">
          <el-table
            :data="tableData"
            style="width: 100%"
            :show-header="false"
            empty-text="对（他/她）说点什么"
          >
            <el-table-column prop="message" label="消息" />
            <el-table-column prop="time" label="发送时间" width="200px">
              <template #default="scope">
                <span style="font-size: 12px; color: #d7d7d7">{{
                  moment(scope.row.time).format('YYYY年MM月DD日 HH:mm:ss')
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>


<script type="link">
import { Search, Position } from '@element-plus/icons-vue'
import { getMessage, insertMessage } from '@/api/message.js'

import moment from 'moment'

export default {
  components: {
  },
  data () {
    return {
      moment,
      Search,
      Position,
      show: false,  // 是否显示
      name: '', // 查询的名字
      message: '', // 留言
      tableData: []
    };
  },
  mounted () {
  },
  methods: {
    searchFn () {
      if (!this.name) {
        return
      }
      this.getImg()
    },
    //获取留言
    getImg () {
      getMessage({
        name: this.name
      }).then(res => {
        if (res.success) {
          this.tableData = res.data
          this.show = true
        }
      })
    },
    // 发送留言
    sendFn () {

      if (!this.name) {
        this.$message({
          message: '请输入名字',
          type: 'warning'
        })
        return
      }

      if (!this.message) {
        this.$message({
          message: '请输入留言',
          type: 'warning'
        })
        return
      }
      const userId = sessionStorage.getItem('userId')
      insertMessage({
        userId: userId,
        name: this.name,
        message: this.message
      }).then(res => {
        if (res.success) {
          this.message = ''
          this.getImg()
          this.$store.actions.fetchData();
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
$bgImage: url('@/assets/img/message1.jpg');
.anonymousMessage {
  display: flex;
  flex-direction: column; /* 将主轴方向设置为垂直方向 */
  height: calc(99vh - 64px);
}
.search {
  flex: 1;
  width: 1200px;
  padding: 30px 0 0 0;
  margin: auto;
  height: 100%;
  overflow: auto;
  /* 其他样式 */
  background: $bgImage no-repeat; /* 图片的路径 */
  background-size: cover;
  background-repeat: no-repeat;
  .z-height {
    z-index: 99;
  }
}
.search-input {
  width: 600px;
  margin: 20px auto;
  display: flex;
}
.img-box {
  height: 200px;

  img {
    width: 100%;
  }
}
img {
  width: 100%;
}
.massage {
  width: 1200px;
}
.massage-input {
  width: 600px;
  margin: 20px auto;
}
.massage-list {
  width: 600px;
  margin: 20px auto;
}
</style>
